<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="/login/JD_sass/JD1.css" />
		<script src="/login/JD_js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title>gulimall</title>
	</head>
	<body>
		<!--顶部logo-->
		<header>
			<a href="/login/http://www.baidu.com"><img src="/login/JD_img/logo.jpg" /></a>
			<p>欢迎登录</p>
			<div class="top-1">
				<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_06.png" /><span>登录页面,调查问卷</span>
			</div>
		</header>

		<div class="top-2">
			<div class="top-2a">
				<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_11.png" />
				<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<span>谷粒商城隐私政策</span>》已上线，将更有利于保护您的个人隐私。</p>
			</div>
		</div>

		<!--大图-->
		<div class="top-3">
			<div class="img_1">
				<img src="/login/JD_img/5731485aN1134b4f0.png" />
			</div>
			<div id="sign">
				<div class="si_top">
					<p>
						<span>谷粒商城不会以任何理由要求您转账汇款，谨防诈骗。</span>
					</p>
				</div>
				<div class="si_cen">
					<h2 class="act btn1">扫码登录</h2>
					<span>|</span>
					<h2 class="btn1">账户登录</h2>
				</div>
				<div class="si_bom tab">
					<img src="/login/JD_img/show.png" class="bom_1" />
					<a href="/login/#"><img src="/login/JD_img/phone-orange.png" class="bom_2" /></a>
					<h6>打开<span class="red">手机谷粒商城</span> 扫描二维码</h6>
					<p>
						<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_15.png" />
						<span><a href="/login/#">免输入</a></span>
						<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_17.png" />
						<span><a href="/login/#">更快</a></span>
						<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_19.png" />
						<span><a href="/login/#">更安全</a></span>
					</p>
				</div>
				<div class="si_bom1 tab" style="display: none;">
					<form action="/login" method="get">
					<div class="error">
						<div></div>
						请输入账户名和密码
					</div>
					<ul>
						<li class="top_1">
							<img src="/login/JD_img/user_03.png" class="err_img1" />
							<input type="text" placeholder=" 邮箱/用户名/已验证手机" name="userName" class="user" />
						</li>
						<li>
							<img src="/login/JD_img/user_06.png" class="err_img2" />
							<input type="password" placeholder=" 密码" class="password" name="password" />
						</li>
						<li class="bri">
							<input type="text" class="cityname" name="cityname" style="display: none">
							<input type="text" class="Ip" name="Ip" style="display: none">
							<a href="">忘记密码</a>
						</li>
						<li class="ent"><button type="submit" id="login" class="btn2"><a>登 &nbsp; &nbsp;录</a></button></li>
					</ul>
					</form>
				</div>
				<div class="si_out">
					<ul>
						<li>
							<div class="addSessionIp">
								<a  href="https://api.weibo.com/oauth2/authorize?client_id=296388511&response_type=code&redirect_uri=http://localhost:20000/oauth2.0/weibo/success">
									<img class="addSessionIp" style="width: 50px;height: 18px" src="/login/JD_img/weibo.png" />
								</a>
							</div>
						</li>
						<li class="f4"> | </li>
						<li>
							<a href="">
								<img src="/login/JD_img/weixin.png" />
								<span>微信</span>
							</a>
						</li>
					</ul>
					<h5 class="rig">
						<img src="/login/JD_img/4de5019d2404d347897dee637895d02b_25.png" />
						<span><a href="http://localhost:20000/reg.html">立即注册</a></span>
					</h5>
				</div>
			</div>
		</div>


		<!--底部-->
		<footer>
			<ul>
				<li><a href="/login/#">关于我们</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">联系我们</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">人才招聘</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">商家入驻</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">广告服务</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">手机谷粒商城</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">友情链接</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">销售联盟</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">谷粒商城社区</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">谷粒商城公益</a></li>
				<li class="little">|</li>
				<li><a href="/login/#">English Site</a></li>
			</ul>
			<span>Copyright &copy; 2004-2017 谷粒商城gulimall.com 版权所有</span>
		</footer>

	</body>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<script type="text/javascript">
		var Ip=returnCitySN['cip']
		var cityname=returnCitySN['cname']
		localStorage.setItem('Ip', Ip)
		localStorage.setItem('cityname', cityname)
		$(".Ip").val(Ip);$(".cityname").val(cityname);
	</script>
	<script type="text/javascript">
		//扫码登陆和用户名登陆切换
		var alDiv = document.getElementsByClassName('tab');
		var alBtn = document.getElementsByTagName('h2');
		alDiv[0].style.display = 'block';
		var act = alBtn[0]
		for (var i = 0; i < alBtn.length; i++) {
			alBtn[i].indent = i;
			alBtn[i].onclick = function() {
				act.className = '';
				alDiv[act.indent].style.display = 'none';
				this.className = 'act'
				alDiv[this.indent].style.display = 'block'
				act = this
			}
		}

		//通过class获取dom元素
		var btn2 = document.getElementsByClassName('btn2')[0];
		var user = document.getElementsByClassName('user')[0];
		var pass = document.getElementsByClassName('password')[0];
		var err = document.getElementsByClassName('error')[0];
		var err_img1 = document.getElementsByClassName('err_img1')[0];
		var err_img2 = document.getElementsByClassName('err_img2')[0];

		//输入框提示
		user.onfocus = function() {
			err_img1.src = '/login/JD_img/grow1.png';
			user.style.border = '1px solid #999';
		}
		pass.onfocus = function() {
			err_img2.src = '/login/JD_img/grow2.png';
			pass.style.border = '1px solid #999';
		}
		user.onblur = function() {
			err_img1.src = '/login/JD_img/img11.png';
			user.style.border = '1px solid red';
		}
		pass.onblur = function() {
			err_img2.src = '/login/JD_img/img22.png';
			pass.style.border = '1px solid red';
		}

		var addSessionIp = document.getElementsByClassName('addSessionIp')[1];
		addSessionIp.onclick = function(){
			$.ajax({//发送login请求
				url: 'http://localhost:20000/addSessionIp',
				type: 'get',
				data: {
					"cityname":localStorage.getItem('cityname'),
					"Ip":localStorage.getItem('Ip'),
				},
				success: function(res) {
				}
			})
		}

		//登陆按钮
		// btn2.onclick = function() {
		// 	//判断用户是否输入用户名和密码
		// 	if (user.value == '' || pass.value == '') {//未输入
		// 		err.style.display = 'block';
		// 		user.style.border = '1px solid red';
		// 		pass.style.border = '1px solid red';
		// 		err_img1.src = '/login/JD_img/img11.png';
		// 		err_img2.src = '/login/JD_img/img22.png';
		// 	} else {//已输入
		// 		//验证用户名的正则表达式
		// 		var verification = /^(?!_)(?!.*?_$)[a-zA-Z0-9_.\u4e00-\u9fa5]+$/;
		// 		//判断用户名是否是手机号格式
		// 		var phone = /^[1][3,4,5,7,8][0-9]{9}$/;
		// 		//判断用户名是否是邮箱格式
		// 		var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		// 		var pattern = null;
		// 		if(verification.test(user.value)||email.test(user.value)){
		// 			if(phone.test(user.value)){
		// 				pattern = "phone";
		// 			}else if(email.test(user.value)){
		// 				pattern = "email";
		// 			}else{
		// 				pattern = "name";
		// 			}
		// 			//alert(pattern);
		// 			console.log(user.value);
		// 			console.log(localStorage.getItem('cityname'));
		// 			$.ajax({//发送login请求
		// 				url: 'http://localhost:20000/login',
		// 				type: 'get',
		// 				data: {
		// 					"userName": user.value,
		// 					"password": pass.value,
		// 					"cityname":localStorage.getItem('cityname'),
		// 					"Ip":localStorage.getItem('Ip'),
		// 				},
		// 				success: function(res) {
		// 					console.log(res);
		// 					if(data.code===1){
		// 						localStorage.setItem('user', res.data)
		// 					}else{
		// 						console.log(res.msg);
		// 					}
		// 				}
		// 			})
		// 		}else{
		// 			alert("请输入正确的用户名");
		// 		}
		// 	}
		// }
	</script>
</html>
